<template>
  <el-dialog
      model-value="statefulsetCreateDialogVisible"
      title="创建"
      width="30%"
      @close="handleClose"
  >

    <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name"/>
      </el-form-item>
      <el-form-item label="命名空间" prop="namespace">
          <el-select class="m-2" filterable  v-model="form.namespace" @click="getNamespace" placeholder="请选择">
            <el-option v-for="(key,index) in namespaceList" :key="index" :label="key" :value="key">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="镜像" prop="image">
        <el-input v-model="form.image"/>
      </el-form-item>
      <el-form-item label="拉取凭据" prop="registry_auth">
          <el-select class="m-2" filterable  v-model="form.registry_auth" @click="getRegistryAuth" placeholder="请选择">
            <el-option v-for="(key,index) in registryAuthList" :key="index.name" :label="key.name" :value="key.name">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="命令" prop="command">
        <el-input v-model="form.command" placeholder="可选, 示例: sleep 24h" />
      </el-form-item>
      <el-form-item label="副本数" prop="replicas">
        <el-input-number v-model="form.replicas" :min="1" label="副本数"></el-input-number>
      </el-form-item>
      <el-form-item label="标签" prop="labels">
        <el-input v-model="form.labels" placeholder="示例: app=gateway,env=test"/>
      </el-form-item>
      <el-form-item label="SVC端口" prop="service_port">
        <el-input-number v-model="form.service_port" :min="1" label="SVC端口"></el-input-number>
      </el-form-item>
      <el-form-item label="SVC目标端口" prop="service_target_port">
        <el-input-number v-model="form.service_target_port" :min="1" label="SVC目标端口"></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">确认</el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>

import {defineEmits, defineProps, ref, watch} from "vue";
import requestUtil from "@/util/request";
import {ElMessage} from 'element-plus'

const props = defineProps({
      statefulsetCreateDialogVisible: {
        type: Boolean,
        default: false,
        required: true
      }
    }
)


const form = ref({
  name: "",
  namespace: "",
  image: "",
  registry_auth: "",
  command: "",
  replicas: "",
  labels: "",
  service_port: "80",
  service_target_port: "80"
})



const rules = ref({
  name: [
    {required: true, message: '请输入名称', trigger: "blur"},
  ],
  namespace: [
    {required: true, message: '请选择命名空间', trigger: "change"},
  ],
  image: [
    {required: true, message: '请输入镜像', trigger: "blur"},
  ],
  labels: [
    {required: true, message: '请输入标签', trigger: "blur"},
  ],
})

const formRef = ref(null)

const emits = defineEmits(['update:modelValue', 'initUserList'])

const namespaceList = ref([])
const getNamespace = async () =>{
  const res=await requestUtil.get("k8s/namespace_all_api")
  namespaceList.value=res.data.data
}

const registryAuthList = ref([])
const getRegistryAuth = async () =>{
  if (form.value.namespace === ''){
     ElMessage.warning('请先选择命名空间！')
  }else {
     const res=await requestUtil.get("storage/secret_api", {namespace: form.value.namespace})
     registryAuthList.value=res.data.data
  }
}

const handleClose = () => {
  emits('update:modelValue', false)
}

const handleConfirm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      console.log(form.value,111)
      let result = await requestUtil.post("workload/statefulset_api", form.value);
      let data = result.data;
      if (data.code === 200) {
        ElMessage.success(data.msg)
        formRef.value.resetFields();
        emits("initUserList")
        handleClose();
      } else {
        ElMessage.error(data.msg);
      }
    } else {
      console.log("fail")
    }
  })
}

</script>

<style scoped>

</style>
